<script setup lang="ts">
import { baseToolsStore } from '@/stores/baseTools'
import { headersStore } from '@/stores/apiHeader'
import { storeToRefs } from 'pinia'
import { reactive, watch, computed } from 'vue'
import HumanResourcesBarOrLine from '@/components/Echart/Bar/HumanResourcesBarOrLine.vue'
import { useHumanStore } from '@/stores/module/human'
import { useDialogStore } from '@/stores/dialog'
const dialogStore = useDialogStore()
const { dialogInfo } = dialogStore
const dialogInfoVisible = dialogInfo.visible
const HumanStore = useHumanStore() // 创建store实例
const { getDepartureAnalysis } = storeToRefs(HumanStore)
const isDepartment = computed(() => baseToolsStore().isDepartment) //是否是部门
// 是否为集团总部
const isHeadquarters = computed(() => {
  return headersStore().scope_code === '0000100001'
})
const options = reactive({
  name: 'getDepartureAnalysis',
  xAxis: {
    type: 'category',
    data: getDepartureAnalysis.value.sub_titles,
  },
  data: getDepartureAnalysis.value.info,
  graphMode: 'null',
})
watch(
  () => getDepartureAnalysis.value,
  () => {
    // 重新赋值options.data
    options.data = getDepartureAnalysis.value.info
    options.xAxis.data = getDepartureAnalysis.value.sub_titles
  },
  { deep: true }
)
</script>
<template>
  <card-box componentName="getDepartureAnalysis">
    <template v-slot:title v-if="getDepartureAnalysis.title">
      <h1
        :class="{
          subtitle: dialogInfoVisible,
        }"
      >
        {{ getDepartureAnalysis.title }}
      </h1>
    </template>
    <HumanResourcesBarOrLine
      :chart-data="options"
      v-if="getDepartureAnalysis.info.length"
    />
    <div v-else class="default-img">
      <p>
        {{
          !isDepartment && !isHeadquarters ? $t('bi_common_nodata') : '暂无数据'
        }}
      </p>
    </div>
  </card-box>
</template>
<style lang="scss" scoped>
.default-img {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/default.png');
  background-repeat: no-repeat;
  background-position: center;
  font-size: 16px;
  color: #00f6ff;
}
.subtitle {
  font-size: 30px;
}
</style>
